<!DOCTYPE html>

<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
<!-- saved from url=(0013)about:internet -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts</title>
    <script src="echarts.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0 auto;
            padding: 0;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div>
        <input style="width: 100px; height: 100px;" type="button" value="JS调用C#" onclick="javascript:jump()">
        <div id="main" style="width: 100%; height: 500px;" />
    </div>

    <script>
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: { readOnly: false },
                    magicType: { type: ['line', 'bar'] },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '30%']
            },
            visualMap: {
                type: 'piecewise',
                show: false,
                dimension: 0,
                seriesIndex: 0,
                pieces: [
                    {
                        gt: 1,
                        lt: 4,
                        color: 'rgba(0, 0, 180, 0.4)'
                    },
                    {
                        gt: 5,
                        lt: 7,
                        color: 'rgba(0, 0, 180, 0.4)'
                    }
                ]
            },
            series: [
                {
                    type: 'line',
                    smooth: 0.6,
                    symbol: 'none',
                    lineStyle: {
                        color: '#5470C6',
                        width: 5
                    },
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max' },
                            { type: 'min', name: 'Min' }
                        ]
                    },
                    markLine: {
                        symbol: ['none', 'none'],
                        label: { show: false },
                        data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
                    },
                    areaStyle: {},
                    data: [

                    ]
                }
            ]
        };
        myChart.setOption(option);
        function refreshEchart(data) {
            option.series[0].data = data;
            //option.series[0].data = [
            //    ['2019-10-10', 200],
            //    ['2019-10-11', 560],
            //    ['2019-10-12', 750],
            //    ['2019-10-13', 580],
            //    ['2019-10-14', 250],
            //    ['2019-10-15', 300],
            //    ['2019-10-16', 450],
            //    ['2019-10-17', 300],
            //    ['2019-10-18', 100]
            //];
            myChart.setOption(option);
        }

        var distance = 750;

        window.addEventListener('resize', function () {
            myChart.resize();
        });

        function ZoomIn() {
            this.distance *= 0.8;
            myChart.setOption({
                grid3D: {
                    viewControl: {
                        distance: this.distance
                    }
                }
            });
        }
        function ZoomOut() {
            this.distance *= 1.2;
            myChart.setOption({
                grid3D: {
                    viewControl: {
                        distance: this.distance
                    }
                }
            });
        }
        function ResetZoom() {
            this.distance = 750;
            myChart.setOption({
                grid3D: {
                    viewControl: {
                        distance: this.distance,
                        alpha: 10,
                        beta: 30,
                    }
                }
            });
        }
        function FixAxisY(minY, maxY) {
            var op = myChart.getOption();
            myChart.setOption({
                zAxis3D: {
                    min: 'dataMin',
                    max: 'dataMax',
                },
                visualMap: {
                    min: minY,
                    max: maxY,
                }
            });
        }
        function Clear() {
            myChart.clear();
            myChart.setOption(op);
        }
        function jump() {
            window.chrome.webview.postMessage("Hello from JavaScript");
        }
    </script>
</body>
</html>